<template>
    <el-dialog
        v-model="addUserVisible"
        title="新增用户"
        @open="selectDeptTree"
        @close="handleClose"
        draggable
    >
        <el-form ref="formRef" :model="addUserForm" label-width="auto">
            <el-form-item label="用户名称" prop="name">
                <el-input v-model="addUserForm.name" clearable />
            </el-form-item>
            <el-form-item label="用户密码" prop="password">
                <el-input v-model="addUserForm.password" clearable />
            </el-form-item>
            <el-form-item label="用户部门" prop="deptId">
                <el-tree-select v-model="addUserForm.deptId" :data="treeData" check-strictly />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="addUserForm.email" clearable />
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNumber">
                <el-input v-model="addUserForm.phoneNumber" clearable />
            </el-form-item>
            <el-form-item label="用户性别" prop="sex">
                <el-radio-group v-model="addUserForm.sex">
                    <el-radio :value="'1'">男</el-radio>
                    <el-radio :value="'2'">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="头像地址" prop="avatar">
                <el-input v-model="addUserForm.avatar" clearable />
                <div class="avatar-preview" v-if="addUserForm.avatar">
                    <div class="avatar-box">
                        <el-avatar :src="addUserForm.avatar" />
                    </div>
                </div>
            </el-form-item>

            <el-form-item label="账号状态" prop="status">
                <el-radio-group v-model="addUserForm.status">
                    <el-radio :value="1">启用</el-radio>
                    <el-radio :value="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="addUserForm.remark" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submitForm">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, inject } from 'vue'
import { getDeptTree } from '@/api/system/dept'
import { addUser } from '@/api/system/user'
import { handleChildreNode, handleAttributes } from '@/utils/common'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const formRef = ref(null)

const treeData = ref([])
const { addUserVisible } = inject('addUser')

const addUserForm = reactive({
    name: undefined,
    deptId: undefined,
    email: undefined,
    phoneNumber: undefined,
    sex: undefined,
    password: undefined,
    avatar: undefined,
    status: undefined,
    remark: undefined
})

/**
 * 重置表单
 * @param formEl 表单的ref
 */
function resetForm(formEl) {
    if (!formEl) return
}
/**
 * 提交表单
 */
function submitForm() {
    addUserVisible.value = false
    addUser(addUserForm)
    resetForm(formRef)
    // 刷新表格
    const { query, path } = route
    router.replace({ path: '/redirect' + path, query: query })
}

/**
 * 获取部门树
 */
function selectDeptTree() {
    getDeptTree().then((response) => {
        if (response) {
            handleChildreNode(response.data)
            handleAttributes(response.data)
            treeData.value = response.data
        }
    })
}
// 重置 addUserForm 的函数
const resetAddUserForm = () => {
    Object.keys(addUserForm).forEach((key) => {
        addUserForm[key] = undefined
    })
}
// 处理对话框关闭事件
function handleClose() {
    resetForm(formRef)
    resetAddUserForm()
    addUserVisible.value = false
}
</script>
<style lang="scss" scoped>
.avatar-preview {
    margin-top: 30px;
    width: 800px;
    @include border();
    @include flex-center;
    & .avatar-box {
        width: 100%;
        height: 100%;
        @include grid-center;
    }
}
</style>
